﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="description" content="jQuery boxy弹出层对话框插件中文测试页面" />
    <meta name="description" content="张鑫旭web前端学习之jquery" />
    <meta name="keywords" content="张鑫旭,鑫空间-鑫生活,博客,web前端,css,demo页面,学习,jQuery,插件" />
    <meta name="author" content="张鑫旭,zhangxixnu" />
    <title>jQuery boxy弹出层对话框插件中文测试页面</title>
    <link rel="shortcut icon" href="http://www.zhangxinxu.com/zxx_ico.png" />
    <link rel="stylesheet" href="../css/common.css?ver=20091102" type="text/css" />
    <link rel="stylesheet" href="../css/boxy.css?ver=20091102" type="text/css" />
    <script type="text/javascript" src="../js/jquery-1.2.6.pack.js?ver=20091102"></script>
    <script type="text/javascript" src="../js/jquery.boxy.js?ver=20091101"></script>
    <style type="text/css">
        .zxx_test_list p {
            padding: 7px 0 3px;
            font-size: 0.95em;
        }
        .zxx_test_list p strong, .f8 {
            font-size: 0.9em;
        }
        .zxx_ul_circle {
            padding-left: 20px;
            padding-bottom: 10px;
        }
        .zxx_ul_circle li {
            list-style-type: disc;
            list-style-position: outside;
            padding-top: 5px;
            font-size: 0.9em;
        }
        .font {
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="zxx_out_box">
        <div class="zxx_in_box">
            <div class="zxx_header">
                <a href="http://www.zhangxinxu.com/">
                    <img class="l" src="http://www.zhangxinxu.com/wordpress/wp-content/themes/default/images/index_logo.gif" />
                </a><span class="zxx_author_time">by zhangxinxu 2009-11-02 19:11</span>
            </div>
            <h3 class="zxx_title">
                jQuery boxy弹出层对话框插件中文测试页面</h3>
            <div class="zxx_main_con">
                <div class="zxx_test_list">
                    <div class="fix">
                        <strong class="l">诊断</strong><a href="jQuery-plugin-boxy.html" class="r f8">« 返回插件讲解主页</a></div>
                    <div class="f8 mt5">
                        还是使用Boxy.get(this)...</div>
                    <ul class="zxx_ul_circle">
                        <li><a href="#zhangxinxu" id="diagnostics">显示诊断信息</a></li>
                    </ul>
                </div>
                <div class="zxx_test_list">
                    <strong>Ajax</strong>
                    <ul class="zxx_ul_circle">
                        <li><a href="#zhangxinxu" onclick="Boxy.load('test.html');">测试1</a></li>
                        <li><a href="#zhangxinxu" onclick="Boxy.load('test2.html',{cache:true});">测试2 - 缓存可用</a></li>
                        <li><a href="#zhangxinxu" onclick="Boxy.load('test3.html',{filter:'#inner'});">测试3 -
                            筛选过滤</a></li>
                    </ul>
                </div>
                <div class="zxx_test_list">
                    <strong>执行器</strong>
                    <ul class="zxx_ul_circle">
                        <li><a href="#zhangxinxu" id="actuator">创建boxy绑定到下面的链接</a></li>
                        <li><a href="#zhangxinxu" id="actuator-toggle">触发绑定的boxy</a></li>
                    </ul>
                </div>
                <div class="zxx_test_list">
                    <strong>设置内容</strong>
                    <ul class="zxx_ul_circle">
                        <li><a href="#zhangxinxu" id="set-content-open">打开一个boxy</a> | <a href="#zhangxinxu"
                            id="set-content">设置内容</a><br />
                            <span class="g6 dib mt5">(鼠标经过行为应该在内容设置后可以继续工作)</span> </li>
                    </ul>
                </div>
                <div class="zxx_test_list">
                    <strong>回调函数</strong>
                    <ul class="zxx_ul_circle">
                        <li><a href="#zhangxinxu" id="after-hide">隐藏后</a></li>
                        <li><a href="#zhangxinxu" id="before-unload">卸载前</a> | <a href="#zhangxinxu" id="before-unload-no-auto-unload">
                            卸载前</a>（没有autounload - 不会执行）</li>
                        <li><a href="#zhangxinxu" id="after-drop">放下后</a></li>
                        <li><a href="#zhangxinxu" id="after-show">显示后</a></li>
                    </ul>
                </div>
                <div class="zxx_test_list">
                    <strong>助手</strong>
                    <ul class="zxx_ul_circle">
                        <li><a href="#jquery" onclick='Boxy.ask("你现在的心情是？", ["开心", "郁闷", "无聊"], function(r) { alert(r); });'>
                            问题，响应数组</a></li>
                        <li><a href="#jquery" onclick='Boxy.ask("请1秒种回答，林志玲是不是你的女朋友？", {"你竟然选择了是！请问你是？":"是", "你选择了不是。":"不是"}, function(r) { alert(r); });'>
                            问题，响应对象</a></li>
                        <li><a href="#jquery" onclick='Boxy.alert("我弹，我弹，我弹弹弹！", function() { alert("弹完了！"); });'>
                            弹出</a></li>
                        <li><a href="#jquery" onclick='Boxy.confirm("确认还是不确认？", function() { alert("已经确认，哈哈！"); });'>
                            确认</a></li>
                    </ul>
                </div>
                <div class="zxx_test_list">
                    <strong>z-index</strong>
                    <div class="mt5 f8">
                        点击下面的链接打开的对话框上的任意位置，可以把他们送到最前端。</div>
                    <ul class="zxx_ul_circle">
                        <li><a href="#jquery" id="z-index">单击使其前端显示</a> | <a href="#jquery" id="z-index-latest">
                            让最新的前端显示</a> </li>
                    </ul>
                </div>
                <div class="zxx_test_list">
                    <strong>模态</strong>
                    <div class="mt5 f8">
                        改变窗口的大小，确保黑色的底层可以扩张。</div>
                    <ul class="zxx_ul_circle">
                        <li><a href="#plugin" id="modal">打开一个模态对话框</a></li>
                        <li><a href="#plugin" onclick="alert(Boxy.isModalVisible()); return false;">检测是否有可见的模式对话框</a></li>
                    </ul>
                </div>
                <div class="zxx_test_list">
                    <strong>显示</strong>
                    <ul class="zxx_ul_circle">
                        <li><a href="#plugin" id="no-show">创建但不显示</a> | <a href="#plugin" id="no-show-now">立即显示</a></li>
                    </ul>
                </div>
                <div>
                    <script type="text/javascript">
                        var diagnose = function (boxy) {
                            alert("位置: " + boxy.getPosition() +
							  "\n大小: " + boxy.getSize() +
							  "\n内容区域大小: " + boxy.getContentSize() +
							  "\n中心点: " + boxy.getCenter());
                        };
                        $(function () {
                            Boxy.DEFAULTS.title = "标题";
                            // Diagnostics
                            $("#diagnostics").click(function () {
                                new Boxy("<div><a href='#nogo' onclick='diagnose(Boxy.get(this));'>显示诊断信息</a></div>");
                                return false;
                            });

                            // Set content
                            var setContent = null;
                            $("#set-content-open").click(function () {
                                setContent = new Boxy(
							"<div style='background-color:red'>这里是显示的内容</div>", {
							    behaviours: function (c) {
							        c.hover(function () {
							            $(this).css('backgroundColor', 'green');
							        }, function () {
							            $(this).css('backgroundColor', 'pink');
							        });
							    }
							}
						  );
                                return false;
                            });
                            $("#set-content").click(function () {
                                setContent.setContent("<div style='background-color:blue'>这里是新添加的显示内容</div>");
                                return false;
                            });

                            // Callbacks
                            $("#after-hide").click(function () {
                                new Boxy("<div>测试内容</div>", {
                                    afterHide: function () {
                                        alert("隐藏后回调");
                                    }
                                });
                                return false;
                            });
                            $("#before-unload").click(function () {
                                new Boxy("<div>测试内容</div>", {
                                    beforeUnload: function () {
                                        alert("卸载前调用");
                                    },
                                    unloadOnHide: true
                                });
                                return false;
                            });
                            $("#before-unload-no-auto-unload").click(function () {
                                new Boxy("<div>测试内容</div>", {
                                    beforeUnload: function () {
                                        alert("这个不应该看见的");
                                    },
                                    unloadOnHide: false
                                });
                                return false;
                            });
                            $("#after-drop").click(function () {
                                new Boxy("<div>测试内容</div>", {
                                    afterDrop: function () {
                                        alert("放下后: " + this.getPosition());
                                    },
                                    draggable: true
                                });
                                return false;
                            });
                            $("#after-show").click(function () {
                                new Boxy("<div>测试内容</div>", {
                                    afterShow: function () {
                                        alert("显示后: " + this.getPosition());
                                    }
                                });
                                return false;
                            });

                            // Z-index
                            var zIndex = null;
                            $("#z-index").click(function () {
                                zIndex = new Boxy(
							"<div>测试内容</div>", { clickToFront: true }
						  );
                                return false;
                            });
                            $("#z-index-latest").click(function () {
                                zIndex.toTop();
                                return false;
                            });

                            // Modals
                            function newModal() {
                                new Boxy("<div><a href='#'>打开一个堆叠的模态</a> | <a href='#' onclick='alert(Boxy.isModalVisible()); return false;'>测试模态对话框</a></div>", {
                                    modal: true, behaviours: function (c) {
                                        c.find("a:first").click(function () {
                                            newModal();
                                        });
                                    }
                                });
                            };

                            $("#modal").click(newModal);

                            // No-show  
                            var noShow;
                            $("#no-show").click(function () {
                                noShow = new Boxy("<div>显示的内容</div>", { show: false });
                                return false;
                            });
                            $("#no-show-now").click(function () {
                                noShow.show();
                                return false;
                            });

                            // Actuator		  
                            $("#actuator").click(function () {
                                var ele = $("#actuator-toggle")[0];
                                new Boxy("<div>测试内容</div>", { actuator: ele, show: false });
                                return false;
                            });
                            $("#actuator-toggle").click(function () {
                                Boxy.linkedTo(this).toggle();
                                return false;
                            });
                        });
                    </script>
                </div>
                <div class="zxx_test_list">
                    <div class="mb10">
                        <strong>结语</strong></div>
                    <ul class="zxx_ul_circle">
                        <li>全文由我（张鑫旭）翻译整理，时间仓促，难免在翻译或编辑时出现错误或不到位之处，欢迎指正。您可以通过邮箱iamzhangxinxu#qq.com联系我。</li>
                        <li>此插件js部分以及css部分自己略微修改，一些英文中文化，添加一些class便于样式控制等。这里的源文件为我修改后的版本。</li>
                    </ul>
                </div>
            </div>
            <div class="zxx_footer">
                Copyright &copy; by <a href="http://www.zhangxinxu.com/">张鑫旭-鑫空间-鑫生活</a> | <a href="http://www.zhangxinxu.com/wordpress/?p=318">
                    该篇相关文章</a>
            </div>
        </div>
    </div>
</body>
</html>
